import React from 'react';
import { message, Dropdown, Menu } from 'antd';
import pdf from './assets/icon/pdf.png';
import xlsx from './assets/icon/xlsx_win.png';
import zip from './assets/icon/zip.png';
import unknown from './assets/icon/unknown.png';
import docx from './assets/icon/docx_win.png';
import ImageViewer from './ImageViewer';

export const getFileType = file => {
  const { type } = file;
  if (type.indexOf('image') >= 0) {
    return 'image';
  }

  if (type.indexOf('pdf') >= 0) {
    return 'pdf';
  }

  if (type.indexOf('sheet') >= 0) {
    return 'xlsx';
  }

  if (type.indexOf('zip') >= 0) {
    return 'zip';
  }

  // if (type.indexOf('json') >= 0) {
  //   return 'json';
  // }
  //
  // if (type.indexOf('markdown') >= 0) {
  //   return 'markdown';
  // }

  return 'unknown';
};

export const getTypeIcon = file => {
  const type = getFileType(file);
  const types = { xlsx, zip, unknown, pdf, docx };
  return type === 'image' && file.thumbUrl ? file.thumbUrl : types[type];
};

class FileItem extends React.Component {
  static defaultProps = {
    onDoubleClick: () => {},
    onMenuClick: () => {},
    menus: [],
  };

  style = {
    padding: 5,
    float: 'left',
  };

  handleDoubleClick = e => {
    const { onDoubleClick, file } = this.props;
    onDoubleClick(file, e);
  };

  handleMenuClick = e => {
    const { onMenuClick, file } = this.props;
    onMenuClick(file, e);
  };

  render() {
    const { file, menus } = this.props;
    const rightMenu = (
      <Menu onClick={this.handleMenuClick}>
        {menus.map(m => (
          <Menu.Item key={m.key}>{m.title}</Menu.Item>
        ))}
      </Menu>
    );
    return (
      <div onDoubleClick={this.handleDoubleClick} style={this.style}>
        <Dropdown overlay={rightMenu} trigger={['contextMenu']}>
          <img width={50} src={getTypeIcon(file)} alt={file.name} title={file.name} />
        </Dropdown>
      </div>
    );
  }
}

export default class FileViewer extends React.Component {
  static defaultProps = {
    dataSource: [],
    menus: [],
    onMenuClick: () => {},
  };

  state = {
    visible: false,
    index: 0,
    images: [],
  };

  handleDoubleClick = (file, e) => {
    const { handleDoubleClick } = this.props;
    if (typeof handleDoubleClick === 'function') {
      handleDoubleClick(file, e);
    } else if (file) {
      this.preview(file);
    } else {
      message.error('文件错误！');
    }
  };

  handleClose = () => {
    this.setState({
      visible: false,
    });
  };

  preview = file => {
    const { dataSource } = this.props;
    const type = getFileType(file);
    if (type === 'image') {
      // 显示图片预览框
      const images = dataSource.filter(f => getFileType(f) === 'image');
      let index = 0;
      images.forEach((f, i) => {
        if (f.uid === file.uid) index = i;
      });
      this.setState({
        visible: true,
        index,
        images,
      });
    } else if (type === 'pdf') {
      window.open(file.url);
    } else if (file.url) {
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = file.url;
      link.download = file.name;
      link.click();
    }
  };

  render() {
    const { dataSource, menus, onMenuClick } = this.props;
    const { index, images, visible } = this.state;
    return (
      <div>
        {dataSource.map(f => (
          <FileItem
            key={f.uid}
            file={f}
            menus={menus}
            onDoubleClick={this.handleDoubleClick}
            onMenuClick={onMenuClick}
          />
        ))}
        <ImageViewer index={index} images={images} visible={visible} onClose={this.handleClose} />
      </div>
    );
  }
}
